<template>
  <div>
    <el-row class="my-height" gutter="20">
      <el-col :span="24">
        <div class="box-card">
          <span style="float: bottom" shadow="hover"><b>个人信息</b></span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="showEditDialog()">修改信息</el-button>

          <el-dialog title="修改我的信息" :visible.sync="dialogFormVisible">
            <el-form :model="editform">
              <el-form-item label="邮箱：" :label-width="formLabelWidth">
                <el-input v-model="editform.email" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="昵称：" :label-width="formLabelWidth">
                <el-input v-model="editform.nickname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="描述：" :label-width="formLabelWidth">
                <el-input v-model="editform.descri" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="微信号：" :label-width="formLabelWidth">
                <el-input v-model="editform.wechatid" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话号：" :label-width="formLabelWidth">
                <el-input v-model="editform.phone" autocomplete="off"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handleCancel()">取 消</el-button>
              <el-button type="primary" @click="handleEdit()">确 定</el-button>
            </div>
          </el-dialog>

          <p style="height: 60px;">用户id：{{ tableData.userid }}</p>
          <p style="height: 60px;">昵称：{{ tableData.nickname }}</p>
          <p style="height: 60px;">描述：{{ tableData.descri }}</p>
          <p style="height: 60px;">邮箱：{{ tableData.email }}</p>
          <p style="height: 60px;">微信号：{{ tableData.wechatid }}</p>
          <p style="height: 60px;">电话号：{{ tableData.phone }}</p>
          <p style="height: 60px;">平均分：{{ tableData.avgscore }}</p>
          <!-- <el-table
               :data="tableData">
             <el-table-column
                 prop="userid"
                 label="用户id"
                 align="center"
                 style="font-size: 40px">
             </el-table-column>
             <el-table-column
                 prop="nickname"
                 label="昵称"
                 align="center"
                 style="font-size: 40px">
             </el-table-column>

             <el-table-column
                 prop="descri"
                 label="描述"
                 align="center"
                 style="font-size: 40px">
             </el-table-column>

             <el-table-column
                 prop="email"
                 label="邮箱"
                 align="center"
                 style="font-size: 40px">
             </el-table-column>

             <el-table-column
                 prop="wechatid"
                 label="微信号"
                 align="center"
                 style="font-size: 20px">
             </el-table-column>

             <el-table-column
                 prop="phone"
                 label="电话号"
                 align="center"
                 style="font-size: 20px">
             </el-table-column>

             <el-table-column
                 prop="avgscore"
                 label="平均分"
                 align="center"
                 style="font-size: 20px">
             </el-table-column>
           </el-table>-->


        </div>
      </el-col>

      <el-col :span="12">
        <div class="box-card">
          <span style="float: bottom" shadow="hover"><b>他人评价</b></span>

          <el-table
              :data="Comment.slice((currentPage-1)*pagesize,currentPage*pagesize)">
            <el-table-column
                prop="userid"
                label="评价者"
                align="center">
            </el-table-column>
            <el-table-column
                prop="score"
                align="center"
                label="评分">
            </el-table-column>
            <el-table-column
                prop="comment"
                label="评价内容"
                align="center">
            </el-table-column>

          </el-table>
          <div style="text-align:center; margin-top: 30px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20, 25]"
                :page-size="pagesize"
                :total="totalcomments"
                layout="total ,prev, pager, next">
            </el-pagination>
          </div>
        </div>
      </el-col>

      <!--------------------------------------------------------- 以下的prop需要确定--------------------------------------->
      <el-col :span="12">
        <div class="box-card">
          <span style="float: bottom" shadow="hover"><b>角色信息</b></span>

          <el-table
              :data="Character.slice((currentPage-1)*pagesize,currentPage*pagesize)">
            <!--试着绑定两个数组 类似tableData.commentlist-->
            <el-table-column
                :prop="characterId"
                label="角色id"
                align="center">
            </el-table-column>
            <el-table-column
                prop="characterName"
                label="角色名称"
                align="center">
            </el-table-column>
            <el-table-column
                prop="description"
                label="角色描述"
                align="center">
            </el-table-column>
          </el-table>
          <div style="text-align: center;margin-top: 30px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15 ,20, 25]"
                :page-size="pagesize"
                :total="totalcharacters"
                layout="total, prev, pager, next">
            </el-pagination>
          </div>
        </div>
      </el-col>

    </el-row>

  </div>


</template>

<script>
import axios from 'axios'

export default {
  name: "PersonalInfo",

  data() {
    return {
      tableData: {},
      Comment: [],
      Character: [],


      totalcomments: 0,
      totalcharacters: 0,
      pagesize: 5,
      currentPage: 1,
      dialogFormVisible: false,

      userid: null,

      infoUser: {
        userid: sessionStorage.getItem('uid')
      },

      editform: {
        descri: '',
        email: '',
        nickname: '',
        wechatid: '',
        phone: '',
        uid: 0,
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.init();
    this.editform.uid=sessionStorage.getItem('uid');
  },

  methods: {
    init() {
      axios({
        methods: 'get',
        url: axios.defaults.baseURL + 'userInfo',
        params: this.infoUser
      }).then((res) => {
        this.$message.success("接收到了信息")
        console.log(res)
        if (res.data.code === '000000') {
          this.tableData = res.data.content;
          this.Comment = res.data.content.commentUserList;
          this.Character = res.data.content.characterList;
          /* this.totalcommentts=res.data.total1;//评论部分信息个数赋给totalcomments
           this.totalcharacters=res.data.total2;//角色部分信息个数赋给totalcharacters*/
        } else {
          this.$message.error(res.data.desc)
        }
      })
    },
    /*async*/ showEditDialog() {
      this.dialogFormVisible = true
      axios.get(axios.defaults.baseURL + 'userInfo').then((res) => {
        this.editform.descri = res.data.content.descri
        this.editform.email = res.data.content.email
        this.editform.phone = res.data.content.phone
        this.editform.nickname = res.data.content.nickname
        this.editform.wechatid = res.data.content.wechatid

      });
    },
    async handleEdit() {  //编辑
      axios({
        method: 'get',
        url: axios.defaults.baseURL + 'userModify',
        params: this.editform
      }).then(res => {
        if (res.data.code === '000000') {

          this.dialogFormVisible = false;
          this.init()
          this.$notify({
            title: '修改成功',
            message: '请刷新页面后查看修改结果',
            type: 'success'
          });
        }else{
          this.$message.error(res.data.desc)
        }

      })
    },
    handleCancel(index, row) {  //取消
      this.dialogFormVisible = false;
    },
    handleSizeChange: function (val) {
      this.pagesize = val;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
  }
}
</script>

<style scoped>
/*.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 60px;
}*/
.text {
  font-size: 14px;
}

.my-height {
  height: 600px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  border-radius: 30px;
}

.p {
  margin-top: 10px;
}
</style>
